<!-- 示例1: 基础用法 -->
<template>
  <div>
    <h2>示例1： 基础用法</h2>
    <button @click="showModal1 = true">打开基础模态框</button>

    <Modal v-model:visible="showModal1">
      <template #header>
        <h3>基础标题</h3>
      </template>
      <template #content>
        <p>这是通过插槽自定义的内容</p>
      </template>
    </Modal>
    <h2>示例2： 禁用遮罩层关闭</h2>
    <button @click="showModal2 = true">打开安全模态框</button>

    <Modal
        v-model:visible="showModal2"
        :close-on-click-overlay="false"
        :close-on-esc="false"
        title="重要操作"
        content="此操作不可逆，请谨慎操作！"
    />
    <h2>示例3： 自定义尺寸和按钮</h2>
    <button @click="showModal3 = true">打开设置面板</button>

    <Modal
        v-model:visible="showModal3"
        width="800px"
        height="600px"
        :centered="false"
        :show-cancel-button="false"
        ok-text="保存"
    >
      <template #content>
        <div class="settings-panel">
          <!-- 自定义设置内容 -->
        </div>
      </template>
    </Modal>
    <h2>示例4： 事件处理</h2>
    <button @click="showModal4 = true">打开带事件的模态框</button>

    <Modal
        v-model:visible="showModal4"
        @ok="handleOk"
        @cancel="handleCancel"
        @open="handleOpen"
        @close="handleClose"
    />
    <h2>示例5： 完全自定义布局</h2>
    <button @click="showModal5 = true">打开自定义布局</button>

    <Modal v-model:visible="showModal5">
      <template #header>
        <div class="custom-header">
          <img src="https://picsum.photos/30/30?random=1.png" alt="logo">
          <h3>自定义头部</h3>
        </div>
      </template>

      <template #content>
        <div class="custom-content">
          <video controls src="https://www.runoob.com/try/demo_source/movie.mp4"></video>
        </div>
      </template>

      <template #footer>
        <div class="custom-footer">
          <button @click="showModal5 = false">关闭</button>
          <button @click="submitForm">提交</button>
        </div>
      </template>
    </Modal>
  </div>

</template>

<script setup>
import { ref } from 'vue'
import Modal from '@/components/Modal/Modal.vue'

// 示例1: 基础用法
const showModal1 = ref(false)
const handleOpen1 = () => {
  console.log('Modal 1 opened')
}
const handleClose1 = () => {
  console.log('Modal 1 closed')
  showModal1.value = false
}

// 示例2: 禁用遮罩层关闭
const showModal2 = ref(false)
const handleOk2 = () => {
  console.log('Modal 2 confirmed')
  showModal2.value = false
}
const handleCancel2 = () => {
  console.log('Modal 2 cancelled')
  showModal2.value = false
}
const handleOpen2 = () => {
  console.log('Modal 2 opened')
}

// 示例3: 自定义尺寸和按钮
const showModal3 = ref(false)
const settings3 = ref({
  theme: 'light',
  notifications: true,
  language: 'zh-CN'
})
const handleSave3 = () => {
  console.log('Settings saved:', settings3.value)
  showModal3.value = false
}
const handleOpen3 = () => {
  console.log('Settings panel opened')
}

// 示例4: 事件处理
const showModal4 = ref(false)
const formData4 = ref({
  name: '',
  email: ''
})
const handleOk4 = () => {
  console.log('Form submitted:', formData4.value)
  showModal4.value = false
}
const handleCancel4 = () => {
  console.log('Form cancelled')
  formData4.value = { name: '', email: '' }
  showModal4.value = false
}
const handleOpen4 = () => {
  console.log('Form modal opened')
}
const handleClose4 = () => {
  console.log('Form modal closed')
  formData4.value = { name: '', email: '' }
}

// 示例5: 完全自定义布局
const showModal5 = ref(false)
const videoRef5 = ref(null)
const handleOpen5 = () => {
  console.log('Custom modal opened')
  // 在打开时重置视频
  if (videoRef5.value) {
    videoRef5.value.currentTime = 0
  }
}
const handleClose5 = () => {
  console.log('Custom modal closed')
  // 在关闭时暂停视频
  if (videoRef5.value) {
    videoRef5.value.pause()
  }
  showModal5.value = false
}
const submitForm5 = () => {
  console.log('Custom form submitted')
  showModal5.value = false
}
</script>

<style scoped>
.modal-examples {
  padding: 20px;
}

.example {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

h2 {
  margin-bottom: 15px;
  color: #333;
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.settings-panel {
  padding: 20px;
}

.setting-item {
  margin-bottom: 15px;
}

.setting-item label {
  display: inline-block;
  width: 80px;
}

.form-item {
  margin-bottom: 15px;
}

.form-item label {
  display: inline-block;
  width: 60px;
}

.form-item input {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.custom-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-content {
  padding: 20px;
}

.custom-content video {
  width: 100%;
  max-width: 600px;
}

.custom-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-cancel {
  background-color: #f44336;
}

.btn-submit {
  background-color: #4CAF50;
}

.btn-cancel:hover {
  background-color: #da190b;
}

.btn-submit:hover {
  background-color: #45a049;
}
</style>

